<template>
  <div class="desc_wrap">
    <div class="desc_con">
      <div class="desc_brief">
        <h2 class="brief_title"><i>&nbsp;</i>{{ route.params.name }}简介</h2>
        <p class="brief_con">
          {{ artistDesc.briefDesc }}
        </p>
      </div>
      <div
        class="desc_introduction"
        v-for="info in artistDesc.introduction"
        :key="info.ti"
      >
        <h2>{{ info.ti }}</h2>
        <p>
          {{ info.txt }}
        </p>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
export default {
  name: 'Desc',
}
</script>

<script lang="ts" setup>
import { ref, onMounted, watch } from 'vue'
import { useRoute } from 'vue-router'
import { reqArtistDesc } from '@/api/singerDetail'
import {
  GetArtistDescResponse,
  ArtistIntroductionItem,
} from '@/api/modules/singerDetailModel'

const route = useRoute()
// 歌手介绍数据
const artistDesc = ref<GetArtistDescResponse>({
  briefDesc: '',
  introduction: [],
})
const getArtistDesc = async () => {
  const id = route.query.id as string
  // const name = route.params.name as string
  const res = await reqArtistDesc({ id })
  // console.log(res)
  artistDesc.value = res
}

onMounted(() => {
  getArtistDesc()
})
watch(route, () => {
  console.log('路由发生改变')
  getArtistDesc()
})
</script>

<style lang="less" scoped>
h2 {
  height: 19px;
  margin: 28px 0 8px;
  font-size: 14px;
  font-weight: bold;
  color: #333;
}
p {
  font-size: 12px;
  line-height: 25px;
  color: #666;
}
.desc_wrap {
  width: 640px;
  margin: 20px 0 10px 0;
  .desc_con {
    text-align: left;
    .desc_brief {
      width: 640px;
      h2.brief_title {
        i {
          height: 14px;
          width: 3px;
          margin-right: 7px;
          background: #c10d0c;
        }
      }
      p.brief_con {
        text-indent: 2em;
      }
    }
  }
}
</style>
